import React from 'react';

import './static/css/orderCommit.css';
import $ from 'jquery';
import {Link,browserHistory} from 'react-router';
import axios from 'axios';

class OrderCommit extends React.Component{
    constructor(props){
        super(props);
		this.state={
			id:0,
			list:""
		}
    }
	 componentWillMount(){
		var _id=this.props.params._id;	      
		this.setState({id:_id});
		var that=this;
		axios.get('http://127.0.0.1:2000/api/productcontent?id='+_id)
            .then(function (response) {
				 that.setState({list:response.data.result[0]});
            })
            .catch(function (error) {
                console.log(error);
            });
	 }

    componentDidMount(){
       var deleteNode = document.getElementById('delBtn');
			      	var numNode  = document.getElementById('numInput');
			      	
			      	var addNode = document.getElementById('addBtn');
			      	
			      	var total = document.getElementById('total'); 
			      	
			      var singlePri = parseFloat(document.getElementById('singlePri').innerHTML); 
			      	total.innerHTML = singlePri * parseInt(numNode.value);
			      	
			      	
			       deleteNode.onclick = function(){
			       		
			       		var num = parseInt(numNode.value);
			       		
			       		if(num == 1){
			       			numNode.value = 1;
			       			
			       		}else {
			       			numNode.value = num  - 1;
			       		}
			       		
			       		if(num <=2 ){
			       			
			       			deleteNode.className = 'delete'
			       			
			       			
			       		}else{
			       			
			       			deleteNode.className = 'delete minus'
			       		}
			       		
						var singlePri = parseFloat(document.getElementById('singlePri').innerHTML); 
			      	
			      	total.innerHTML = singlePri * parseInt(numNode.value);
			       		
			       }
			       
			       addNode.onclick = function(){
			       	
			       		var num = parseInt(numNode.value) + 1;
			       		numNode.value = num;
			       		
			       		if(num >= 2){
			       			
			       			deleteNode.className = 'delete minus'
			       		}else{
			       			
			       			deleteNode.className = 'delete'
			       		}
			       		
			       		var singlePri = parseFloat(document.getElementById('singlePri').innerHTML); 
			      	
			      	total.innerHTML = singlePri * parseInt(numNode.value);
			       		
			       }

			

		var that=this;
		$(".commits").click(function(){
               var product_id=that.state.id;
               var user_id=JSON.parse(sessionStorage.getItem("user_info"))._id;
               var price=that.state.list.price;
               var count=$(".number").val();
               var all_price=price*count;
               var url="http://127.0.0.1:2000/api/order";

			   axios.post(url,{product_id:product_id,user_id:user_id,price:price,count:count,all_price:all_price})
            	.then(function (res) {
					console.log(res)
					if(res.data.success==1){
                    	alert(res.data.msg);
						browserHistory.push('Order');  //js路由跳转

                  }
                	
            	})
            	.catch(function (error) {
                	console.log(error);
            	});  

        })
			 
    }
    render(){
        return(
        <div>
            <div id='header6'>
			<div className='back'>
				<Link to={{pathname:"/Detail/"+this.state.id}}>
					<i className='iconfont'>&#xe640;</i>
				</Link>
			</div>
			
			<div className="title"><Link to="/Order">提交订单</Link></div>
			
		</div>
		
		<div className='contents'>
			
			<div className="content-title">
				{this.state.list.title}
			</div>
			<div className='deal-content'>
				
				<div className='content-info-line'>
					
					<span className='text'>单价：</span>
					<span className='price' >
						<span id='singlePri'>{this.state.list.price}</span>
						元
					</span>
				</div>
				<div className='content-info-line'>
					
					<span className='text'>数量：</span>
					<div className='operate'>
						
						<div  className='delete' id="delBtn">
							<i className='iconfont'>&#xe631;</i>
						</div>
						<input type="text" value='1' className='number' id='numInput'/>
						<div  className='add' id='addBtn'>
							<i className='iconfont'>&#xe60d;</i>
						</div>
					</div>
				</div>
				<div className='content-info-line'>
					
					<span className='text'>总价：</span>
					<span className='amount'>
						<span id='total'>9.5</span>
						元
					</span>
				</div>
			</div>
			<div className="content-title">
				免登录直接购买
			</div>
			<div className='login-wrapper'>
				
				<div className='content-info-line'>
					
					<input type='text' placeholder="请输入手机号" className='tel'/>
					<button type="button" className='send'>发送验证码</button>
				</div>
				<div className='content-info-line'>
					
					<input type='text' placeholder="请输入手机短信中的验证码" className='yzm'/>
					
				</div>
			</div>
			
			<div className='btn-wrapper'>
				<div className='commits'>
					提交订单
				</div>
			</div>
			<div className='quick-login'>
				已有美团账号也可以去
				<Link to="/Login" className='login'>登录</Link>
			</div>
		</div>
		
		<div className="footer">
			<div className="footer-bar">
				<Link to="/Login" className="login1">登录</Link>
				<Link to="/Register1" className="register1">注册</Link>
				<div className="city">
					<span>城市：</span>
					<a href="#" className="sz">深圳</a>
				</div>
			</div>
			<div className="footer-nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">订单</a></li>
					<li><a href="#">客户端</a></li>
					<li><a href="#">电脑版</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
			</div>
			<div className="footer-links">
				<span>友情链接:</span>
				<a href="#">猫眼电影</a>
			</div>
			<div className="footer-copyright">
				<div className="hr"></div>
				<span>
					©2017 美团网 
					<a href="#">京ICP证070791号</a>
				</span>
			</div>
		</div>
        </div>
        )
    }
        
}

export default OrderCommit;



